<template>
	<div>
		<!-- 头部导航 -->
		<headerNav></headerNav>

		<!-- 导航按钮 -->
		<navs></navs>

		<!-- 全部 -->
		<div class="newDiscMore">
			<div class="title">
				<h3>全部</h3>
			</div>

			<div class="newDisc">
				<div class="content">
					<ul>
						<router-link v-for="item in proAll" :key="item.id" tag="li"
							:to="'/recommend/playlistMoreSingle?id='+ item.id" class="li">
							<!-- <li > -->
							<div class="img">
								<img :src="item.Image" alt="" />
							</div>

							<div class="font">
								<p>{{ item.Info }}</p>
							</div>
							<span><i class="iconfont icon-play"></i></span>
							<!-- </li> -->
						</router-link>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import headerNav from "../../components/base/headerNav.vue";
	import navs from "../../components/base/navs.vue";

	import {
		getAlbumAll
	} from "../../api/recommend";

	export default {
		components: {
			headerNav,
			navs
		},
		data() {
			return {
				proAll: null,
			};
		},
		methods: {
			getAlbumAllFun() {
				getAlbumAll().then((data) => {
					console.log(data);
					this.proAll = data.data;
				});
			},
		},
		created() {
			this.getAlbumAllFun(); //全部获取推荐歌单
		},

		// 过滤器
		filters: {
			playCountData(value) {
				let tenThousand = value > 10000 ? value / 10000 : value; // 万计算
				let billion =
					tenThousand > 10000 ?
					parseInt(value / 10000) + "亿" :
					parseInt(tenThousand) + "万"; //亿计算
				return billion;
			},
		},
	};
</script>

<style lang="less">
	.newDiscMore {
		margin-top: -14px;
		background-color: #0F172A;
		color: #EEEEEE;

		.title {
			margin: 14px 10px;
			padding-bottom: 5px;
			border-bottom: 3px solid #243DE2;

			h3 {
				font-size: 20px;
			}
		}

		.newDisc {
			padding-bottom: 100px;

			.content {
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					.li {
						flex: 0 0 32%;
						position: relative;
						margin-top: 10px;

						.img {
							background-color: cornflowerblue;
							min-height: 50px;
							width: 100%;
							border-radius: 3px;

							img {
								width: 100%;
								border-radius: 3px;
							}
						}

						.font {
							padding: 5px;
							margin-bottom: 10px;

							p {
								font-size: 12px;
								color: #565658;
								line-height: 15px;
								margin-bottom: 5px;
								// margin-bottom: 10px;
								// 1、固定宽度（高度可有可无）：width: 195px;
								// 2、把盒子转成弹性伸缩盒子：
								display: -webkit-box;
								// 3、弹性盒子排列方式：垂直排列：
								-webkit-box-orient: vertical;
								// 4、规定显示几行文本：
								-webkit-line-clamp: 1;
								// 5、溢出隐藏：
								overflow: hidden;
								// padding-bottom: 0;
							}
						}

						span {
							position: absolute;
							top: -10px;
							right: 0;
							color: #000;
							font-size: 15px;
							z-index: -1;

							i {
								font-size: 100px;
							}
						}
					}
				}
			}
		}
	}
</style>
